<template>
  <div id="box" :class="modalClass">
    <div id="content"  @click.stop="">
      <p class="p1">修改昵称</p>
      <p class="input p2">
        <input type="text" v-model="name" placeholder="输入您的新昵称">
      </p>
      <p class="p5">
        <button @click="callback">提交</button>
      </p>
      <button class="closeWindow" @click="cancel">
        <svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg>
      </button>
    </div>
  </div>
</template>
<script>
  import {changeUserInfo} from "../http/api";

  export default {
    name : 'changeNickname',
    data(){
      return{
        modalClass : 'modal-hide',
        name : null,
      }
    },
    methods :{
      cancel(){
        this.hide();
        this.$emit('cancel'); /*组件调用方法： @cancel='function'*/
      },
      show(){
        this.modalClass = 'modal-show';
      },
      hide(){
        this.modalClass = 'modal-hide';
      },
      dialogShow() {
        /*显示弹窗*/
        this.show();
      },
      callback() {
        /*点击确定*/
        let info = null;
        if( !this.name ){
          info = '请输入昵称';
        }
        if( info ){
          require('../common/js/toast').toast(info);
          info = null;
          return;
        }
        changeUserInfo({username : this.name  }).then(res => {
          if(res.code == 200){
            require('../common/js/toast').toast('修改昵称成功');
            this.hide();
            this.$emit('confirm' , {name : this.name} ); /*组件调用方法： @confirm='function'*/
          }
        });
      },
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/animate.css";
  #box{
    position: fixed;z-index: 10;background: rgba(0,0,0,0.5);width: 100%;height: 100%;left: 0;top: 0;
  }
  #content {
    width: 430px;height: 236px;text-align: center;.borderRadius;overflow:hidden;background: #fff;.borderRadius;position: absolute;
    left: 50%;top: 50%;margin-left: -215px;margin-top: -130px;
    >.p1{
      color: #262626;font-size: 20px;padding-top: 23px;padding-bottom: 46px;text-align: center;
    }
    >.p2{
      input{
        .input;width: 370px;height: 40px;padding: 0 11px;margin-right: 15px;
      }
    }
    >.p5{
      padding-top: 35px;
      >button{
        .submit;width: 160px;height: 38px;line-height: 38px;font-size: 16px;
      }
    }
    .closeWindow{
      padding: 15px;position: absolute;right: 0;top:0;background: none;
      img{width: 13px;height: 13px};color: rgba(0, 0, 0, 0.45);font-size: 18px;
      &:hover{
        color: rgba(0, 0, 0, 0.75);
      }
    }
  }
</style>
